<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'orgName'">
          <div>
            <Avatar :src="record.orgLogo"></Avatar>
            <span style="margin-left: 10px">{{ record.orgName }}</span>
          </div>
        </template>
        <template v-if="column.key === 'joinFlag'">
          <Switch
            :checked="record.joinFlag === JoinFlagEnum.join"
            @change="(val:boolean) => handleJoinFlag(val, record)"
          ></Switch>
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { h, reactive } from 'vue';
  import { BasicTable, useTable, FormSchema } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { Switch, Avatar, Modal } from 'ant-design-vue';
  import {
    orgBoManagerConfig,
    orgBoManagerList,
  } from '@/api/institution/businessOpportunitiesManage';
  import { IOrgList } from '@/api/institution/model/businessOpportunitiesManageModel';
  import { JoinFlagEnum } from '@/enums/businessOpportunitiesEnum';
  import { useMessage } from '@/hooks/web/useMessage';

  const tableSchemas = reactive<FormSchema[]>([
    {
      field: `keyWord`,
      label: `关键字`,
      component: 'Input',
      colProps: {
        span: 6,
      },
      componentProps: {
        placeholder: '组织名称',
      },
    },

    {
      field: `joinFlag`,
      label: `跨会状态`,
      component: 'Select',
      componentProps: {
        fieldNames: { label: 'dictLabel', value: 'dictValue' },
        options: [
          {
            dictValue: JoinFlagEnum.noJoin,
            dictLabel: '未开启',
          },
          {
            dictValue: JoinFlagEnum.join,
            dictLabel: '已开启',
          },
        ],
      },
      colProps: {
        span: 6,
      },
    },
  ]);

  const [registerTable, { reload }] = useTable({
    api: orgBoManagerList,
    columns: getBasicColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    formConfig: {
      labelWidth: 100,
      schemas: tableSchemas as unknown as FormSchema[],
    },
    afterFetch: (data: IOrgList[]) => {
      return data.map((item) => {
        return {
          ...item,
        };
      });
    },
  });
  const { createMessage } = useMessage();

  const handleJoinFlag = async (val: boolean, item: IOrgList) => {
    const content = h('div', [
      h('span', val ? '确定要开启' : '确定要关闭'),
      h(
        'span',
        {
          style: {
            color: '#165DFF',
          },
        },
        `“${item.orgName}”`,
      ),
      h(
        'span',
        val
          ? '供需共享？开启后，该组织的供需将可以申请跨会推广，也将可以查看其他组织的供需。'
          : '供需共享？关闭后，该组织的供需将无法申请跨会推广，也将无法查看其他组织的供需。不影响已有的对接记录查看。已跨会推广的链接将全部失效，在开启权限后恢复。',
      ),
    ]);
    Modal.confirm({
      title: `${val ? '开启' : '关闭'}供需共享`,
      content: () => content,
      okText: val ? '开启共享' : '关闭共享',
      cancelText: '取消',
      okButtonProps: {
        type: 'primary',
        danger: !val,
      },
      onOk: async () => {
        console.log(item.id);

        await orgBoManagerConfig({
          id: item.id,
          joinFlag: val ? JoinFlagEnum.join : JoinFlagEnum.noJoin,
          tenantId: item.tenantId,
        });

        createMessage.success('操作成功');
        reload();
      },
    });
  };
</script>

<style lang="less" scoped>
  .product-image-text {
    display: flex;
    align-items: center;
    gap: 16px;

    .text {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 定义文本的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: normal; /* 保证文本换行 */
      line-height: 1.6; /* 根据需要调整行高 */
      max-height: 3.2em; /* 行高乘以行数 */
    }
  }

  .image-text {
    display: flex;
    align-items: center;
    gap: 16px;

    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
</style>
